import React, {useRef, useState} from "react";
import {Button, Card, Divider, message, Modal} from "antd";
import ProTable, {ActionType, ProColumns, RequestData} from "@ant-design/pro-table";
import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
import interfaceService from "@/services/interface";
import {transformParams} from "@/utils/utils";
import {InterfaceModifyForm,InterfaceCreateForm} from "../Form";
import {InterfaceVO} from "@/types/interface";
import GridContainer from "@/components/GridContainer";

const queryList= async (params:any, sorter:any, filter:any): Promise<RequestData<InterfaceVO>> => {
  const  dto = transformParams(params, sorter);
  const response=await interfaceService.queryList(dto);
  const {data}=response;
  const {pagination}=data;
  return {
    success:true,
    data:data.items,
    total:pagination.total,
  };
}

const _delete=async (params:any)=>{
  const response=await interfaceService._delete(params)
  const {exception}=response;
  if(!exception){
    message.success('删除成功');
  }
}

interface InterfaceListProps {
  actionRef?:((actionRef: ActionType) => void);
}

const InterfaceList: React.FC<InterfaceListProps> = (props:InterfaceListProps) => {

  const actionRef = useRef<ActionType>();

  const onActionRef=(ref:ActionType)=>{
    actionRef.current=ref;
    props.actionRef&&props.actionRef(ref);
  }

  /**
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  const [modifyModalVisible, handleModifyModalVisible] = useState<boolean>(false);

  const [currentRow, setCurrentRow] = useState<InterfaceVO |undefined>(undefined);

  const showModifyModal=(record:InterfaceVO) => {
    handleModifyModalVisible(true);
    setCurrentRow(record);
  }

  const showDeleteModal=async (record:InterfaceVO) => {
    Modal.confirm({
      title: '是否删除该接口',
      content: record.name,
      onOk:()=>{
        // @ts-ignore
        _delete({id: record.id});
        actionRef.current?.reload();
      }
    })
  }

  const onReset=()=>{
    onVisibleChange();
    actionRef.current?.reload();
  }

  const onVisibleChange=()=>{
    handleModifyModalVisible(false);
    setCurrentRow(undefined);
  }

  const columns: ProColumns<InterfaceVO>[] = [
    {
      title: '接口名称',
      align:'left',
      dataIndex: ['name'],
    },
    {
      title: '接口路径',
      align:'left',
      dataIndex: ['path'],
    },
    {
      title: '接口方法',
      align:'center',
      dataIndex: ['method'],
      valueType:'select',
      valueEnum: {
        GET: { text: 'GET' },
        POST: { text: 'POST' },
        PUT: { text: 'PUT' },
        DELETE: { text: 'DELETE' },
      },
    },
    {
      title: '接口类型',
      align:'center',
      dataIndex: ['type'],
      valueType:'select',
      valueEnum: {
        PUBLIC: { text: '公开访问' },
        PRIVATE: { text: '授权访问' },
        AUTHENTICATED: { text: '认证访问' },
        API: { text: 'API访问' },
      },
    },
    {
      title: '操作',
      align:'center',
      dataIndex: 'action',
      search:false,
      render:(dom,entity,index,action,schema)=>{
        return (
          <>
            <Button
              type="link"
              icon={<EditOutlined />}
              onClick={()=>showModifyModal(entity)}
            />
            <Divider type={"vertical"} />
            <Button
              type="link"
              icon={<DeleteOutlined />}
              onClick={()=>showDeleteModal(entity)}
            />
          </>
        )
      }
    },
  ];

  return (
    <>
      <ProTable<InterfaceVO>
        actionRef={onActionRef}
        // @ts-ignore
        rowKey={((record) => record.id)}
        pagination={false}
        toolBarRender={false}
        request={queryList}
        columns={columns}
      />
      {currentRow&&(
        <InterfaceModifyForm
          entity={currentRow}
          onReset={onReset}
          visible={modifyModalVisible}
          onVisibleChange={onVisibleChange}
        />
      )}
    </>
);
};

interface Props {

}

interface State{

}

export default class List extends React.Component<Props,State> {

  actionRef:ActionType | undefined;

  onReset=()=>{
    const reset=this.actionRef?.reset;
    reset&&reset();
  }

  render() {
    return (
      <GridContainer>
        <Card
          bordered={false}
          title={'接口列表'}
          extra={<InterfaceCreateForm onReset={this.onReset} />}
        >
          <InterfaceList
            actionRef={(actionRef)=>this.actionRef=actionRef}
          />
        </Card>
      </GridContainer>
    );
  }
}

